import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => {
  return {
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
      padding: '64px 0',
    },
    content: {
      maxWidth: 800,
      margin: '0 auto',
      padding: '32px',
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      borderRadius: token.borderRadiusLG,
      boxShadow: token.boxShadow,
    },
    header: {
      textAlign: 'center',
      marginBottom: 32,
    },
    title: {
      marginBottom: 16,
      color: token.colorTextHeading,
    },
    description: {
      fontSize: token.fontSize,
    },
    steps: {
      marginBottom: 32,
    },
    formContainer: {
      minHeight: 200,
    },
    successContainer: {
      textAlign: 'center',
    },
    footer: {
      textAlign: 'center',
      marginTop: 32,
    },
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
  };
});

export default useStyles;
